<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>Document</title>
	<style type="text/css">
		#msg{width:800px;border:solid 1px #ddd;padding:10px;}
		ul{list-style:none;}
		#msg h3{border-bottom:solid 1px #555;padding-bottom:5px;}
		#msg ul li{border:solid 1px #666;padding:10px;}
	</style>
	<script type="text/javascript" src="js.js"></script>
	<script>
		window.onload=function(){
			var form = document.getElementById("form1");
			form.onsubmit=function(){
				var title = document.getElementById("title").value.replace(/(^\s*)|(\s*$)/g,"");
				var body = document.getElementById("body").value.replace(/(^\s*)|(\s*$)/g,"");
				if(title==""){
					alert("标题不能为空");
				}
				if(body==""){
					alert("内容不能为空");
				}
				//发送异步请求
				//1 指定URL   2 发送请求   3 获取数据。。。
				var ajax = getAjax();
				//AJAX事件监听
				ajax.onreadystatechange=function(){
					//所有数据都接收完    并且状态码为200 表示我们请求完成并且是成功的
					//当readyState状态码为4时表示全部接收完了
					if(ajax.readyState==4){
						//接收数据没有问题
						if(ajax.status==200){
							// alert(ajax.responseText);return;
							if(ajax.responseText==1){
								var ul = document.getElementById("msg").getElementsByTagName("ul")[0];
								var liData = "<li><h3>"+title+"</h3><p>"+body+"</p></li>";
								ul.innerHTML+=liData; 
							}else{
								alert("insert error");
							}
						}else{
							// alert("出错了。。。");
						}
					}
				}
				var data = "title="+title+"&body="+body;
				// ajax.open("get","2.php?"+data);//指定URL 使用GET发送
				ajax.open("post","2.php");
				ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
				ajax.send(data);
				return false;
			}

		}
		
	</script>
</head>
<body>
	<h1><script>document.write(new Date()*1);</script></h1>
	<form id="form1" onsubmit="return false">
		标题：<input type="text" name="title" id="title"/><br/>
		内容：<textarea name="body" cols="30" rows="6" id="body"></textarea><br/>
		<input type="submit"/>
	</form>
	<div id="msg">
		<ul>
			<?php
				$db = include "db.php";
				foreach($db as $v):
			?>
				<li>	
					<h3><?php echo $v['title'];?></h3>
					<p><?php echo $v['body'];?></p>
				</li>
			<?php
			endforeach;
			?>
		</ul>
	</div>
</body>
</html>